<template>
  <div ref="UserData" class="_wz_userData">
    <div class="demo-drawer-profile">
      <Card :bordered="true" style="margin: 10px 0px;">
        <p slot="title">基本信息</p>
        <Form label-position="right" :label-width="100" inline>
          <div class="demo-drawer-profile">
            <Row>
              <i-col span="4">
                <div class="demo-upload-list">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="!!userData.driverAvatar?apiUrl.imgUrl+userData.driverAvatar:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
              </i-col>
              <i-col span="20" style="margin-bottom: 0px;">
                <i-col span="8">
                  <FormItem label="人员名称：">
                    {{!!userData.driverName?userData.driverName:'--'}}
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="人员性别：">
                    {{!!userData.driverGender?userData.driverGender:'--'}}
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="联系电话：">
                    {{!!userData.driverPhone?userData.driverPhone:'--'}}
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="人员类型：">
                    {{!!userData.driverTypeName?userData.driverTypeName:'--'}}
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="从业资格证号：">
                    {{!!userData.certificateCard?userData.certificateCard:'--'}}
                  </FormItem>
                </i-col>
                <i-col span="8">
                  <FormItem label="身份证号：">
                    {{!!userData.driverIdentifyNum?userData.driverIdentifyNum:'--'}}
                  </FormItem>
                </i-col>
                <i-col span="12">
                  <FormItem label="运输企业：">
                    {{!!userData.deptName?userData.deptName:'--'}}
                  </FormItem>
                </i-col>
                <i-col span="12">
                  <FormItem label="家庭地址：">
                    {{!!userData.driverAddress ? userData.driverAddress : '--'}}
                  </FormItem>
                </i-col>
              </i-col>
              <i-col span="12">
                <FormItem label="资格证有效期：">
                  {{!!userData.driverValidDate?userData.driverValidDate:'--'}} -
                  {{!!userData.driverValidFrom?userData.driverValidFrom:'--'}}
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="初次领证日期：">
                  {{!!userData.driverIssueDate?userData.driverIssueDate:'--'}}
                </FormItem>
              </i-col>
              <i-col span="24">
                <FormItem label="备注：">
                  {{!!userData.remark ? userData.remark : '--'}}
                </FormItem>
              </i-col>
              <i-col span="6">
                <div class="demo-upload-list" style="width: 80%;">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="!!userData.driverCertificateImg?apiUrl.imgUrl+userData.driverCertificateImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
                <div style="text-align: center;line-height: 35px;">从业资格证</div>
              </i-col>
              <i-col span="6">
                <div class="demo-upload-list" style="width: 80%;">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="!!userData.driverPic?apiUrl.imgUrl+userData.driverPic:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
                <div style="text-align: center;line-height: 35px;">驾驶证照片</div>
              </i-col>
              <i-col span="6">
                <div class="demo-upload-list" style="width: 80%;">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="!!userData.personFrontPic?apiUrl.imgUrl+userData.personFrontPic:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
                <div style="text-align: center;line-height: 35px;">身份证正面照</div>
              </i-col>
              <i-col span="6">
                <div class="demo-upload-list" style="width: 80%;">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="!!userData.personBackPic?apiUrl.imgUrl+userData.personBackPic:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
                <div style="text-align: center;line-height: 35px;">身份证背面照</div>
              </i-col>

            </Row>
          </div>
        </Form>
      </Card>
    </div>
  </div>
</template>
<script>
  export default {
    props: ["selectdata"],
    data() {
      return {
        userData: {},
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      this.userDataFun(this.selectdata);
    },
    methods: {//执行的方法
      userDataFun(data) {
        this.userData = data
      }

    },
    watch: {//监听
      selectdata(news, old) {
        this.userDataFun(news);
      }
    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less" scoped>
  ._wz_userData {
    .demo-drawer-profile .ivu-input[disabled] {
      background: #fff !important;
      color: #666;
    }

    .demo-upload-list {
      margin: auto;
      display: block;
      width: 100px;
      height: 132px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        align-items: center;
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          display: block;
          margin: auto;
          color: #fff;
          font-size: 40px;
          cursor: pointer;
        }
      }
    }


    .demo-upload-list:hover .demo-upload-list-cover {

      display: flex;
    }

    .demo-drawer-profile {
      font-size: 14px;
    }
  }

</style>
